<template>
    <common-card 
        title="累计订单量" value="2,157,420">

        <!-- 图表部分 -->
        <template>
            <v-chart :options="getOptions()"/>
        </template>
        <!-- 卡片脚部 -->
        <template v-slot:footer>
            <div>
                <span>昨日订单量</span>
                <span class="emphasis">2,000,000</span>
            </div>
        </template>

    </common-card>
</template>

<script>
    import commonCardMixin from '../../mixins/commonCardMixin'

    export default {
        mixins: [commonCardMixin],
        methods: {
            getOptions(){
                return {
                    xAxis: {
                        type: 'category',
                        show: false, // 不显示 x 轴
                        boundaryGap: false // 默认真实的图形区域距离X轴的0点和末点有留白
                                        // false 表示去除该空白，使图形充满
                    },
                    yAxis: {
                        show: false // 不显示 y 轴
                    },
                    series: [{
                        type: 'line',
                        data: [620,432,220,534,790,430,220,320,532,320,834,690,530,220,620],
                        areaStyle: { // 显示面积图
                            color: 'purple'
                        },
                        lineStyle: { // 不显示折线图的线
                            width: 0
                        },
                        itemStyle: { // 不显示折线图线上的点
                            opacity: 0
                        },
                        smooth: true
                    }],

                    grid: { // 图形充满所属区域，不要留空
                        top:0,bottom:0,left:0,right:0
                    }
                }
            }
        }
    }
</script>

<style lang="scss" scoped>
</style>
